<template>
  <!-- 语音文本组件 -->
  <div>
    <el-dialog
      title="语音"
      :visible.sync="localVisible"
      width="85%"
      @open="audioOpen"
      @close="handleClose"
    >
      <div class="buttonBox">
        <el-button type="success" plain @click="audioDlalog"
          >生成新录音文本</el-button
        >
      </div>
      <el-table ref="multipleTable" :data="tableData" style="width: 100%">
        <el-table-column width="55"> </el-table-column>

        <el-table-column prop="name" label="音频名称" width="120">
        </el-table-column>
        <el-table-column prop="speed" label="语速" width="120">
          <template slot-scope="scope">{{ scope.row.speed }}</template>
        </el-table-column>
        <el-table-column prop="content" label="文本内容" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="音频" width="350">
          <template slot-scope="scope">
            <audio
              ref="audioPlayer"
              :src="scope.row.audio"
              controls
            ></audio>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="upload(scope.row)"
              >添加录音文本</el-button
            >
            <el-button
              type="primary"
              plain
              size="mini"
              @click="editName(scope.row)"
              >编辑音频名称</el-button
            >
            <el-button type="danger" size="mini" @click="audioDel(scope.row)"
              >删除</el-button
            ></template
          >
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 生成录音文本对话框 -->
    <el-dialog
      title="语音生成"
      :visible.sync="audioDialogVisible"
      width="30%"
      @close="vitoceQuit"
    >
      <el-form ref="form" :model="form" label-width="40px">
        <el-form-item label="文本">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="语速">
          <el-input-number
            v-model="form.speed"
            :precision="1"
            :step="0.1"
            :max="2"
            :min="0.1"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button type="primary" @click="ajaxAudioTTs">确定</el-button>
        <el-button @click="vitoceQuit">取消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑语音名称对话框 -->
    <el-dialog
      title="编辑语音名称"
      :visible.sync="nameDialogVisible"
      width="30%"
      @close="editNameQuit"
    >
      <el-input v-model="audioObj.name" placeholder="请输入内容"></el-input>
      <div class="button">
        <el-button type="primary" @click="audioUodate">确定</el-button>
        <el-button @click="editNameQuit">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { audioTable, audioTTs, audioDel, audioUpdate } from "@/api/audio";
export default {
  props: ["dialogVisible"],
  computed: {
    // 使用计算属性创建一个本地的代理，用于同步 Element UI Dialog 的 visible 状态
    localVisible: {
      get() {
        return this.dialogVisible;
      },
      set(value) {
        // 当对话框内部试图关闭时（如点击关闭按钮或取消按钮），通知父组件
        this.$emit("update:dialogVisible", value);
      },
    },
  },
  data() {
    return {
      //生成语音对话框
      audioDialogVisible: false,
      //名称对话框
      nameDialogVisible: false,
      //音频名称绑定
      input: "",
      tableData: [],
      multipleSelection: [],
      audioObj: {},
      form: {
        content: "",
        speed: "1",
      },
    };
  },
  methods: {
    async audioOpen() {
      let res = await audioTable();
      this.tableData = res.data.meta.data.rows;
      this.tableData.forEach((element) => {
        element.audio = `http://192.168.42.201:90/${element.name}`;
      });

      console.log(143,this.tableData);
    },
    // 生成新语音文本
    async ajaxAudioTTs() {
      let data = {
        content: this.form.content,
        speed: String(this.form.speed),
      };

      let res = await audioTTs(data);

      if (res.data.status_code === 0) {
        this.form = {
          content: "",
          speed: "1",
        };

        this.audioDialogVisible = false;
        this.$message.success("生成成功");
        this.audioOpen();
      }

      if (res.data.status_code === -1) {
        this.$message.error("生成失败");
        this.audioOpen();
      }
    },
    // 修改语音名称
    async audioUodate() {
      let res = await audioUpdate({
        id: String(this.audioObj.id),
        name: this.audioObj.name,
      });
      if (res.data.code === 201) {
        this.$message.success("修改名称成功");
        this.nameDialogVisible = false;
        this.audioOpen();
      }
    },
    // 删除生成语音文本
    async audioDel(data) {
      let res = await audioDel({ id: data.id });

      if (res.data.meta.code === 200) {
        this.$message.success("删除成功");
        this.audioOpen();
      }
    },
    // 退出对话框
    handleClose() {
      this.localVisible = false;
    },
    //音频名称打开
    editName(data) {
      this.audioObj = data;
      this.nameDialogVisible = true;
    },
    // 音频名称关闭
    editNameQuit() {
      this.nameDialogVisible = false;
    },
    //语音打开
    audioDlalog() {
      this.audioDialogVisible = true;
    },
    //语音关闭
    vitoceQuit() {
      this.audioDialogVisible = false;
    },
    // 上传到父组件
    upload(data) {
      this.$emit("upload", data);
      this.localVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.buttonBox {
  display: flex;
  justify-content: right;
}
.button {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
